<template>
  <div class="server-error">
    <leave-crud title="数据流" :url="url" :searchOption="searchOption" :cutOperation="['view', 'create', 'edit']">
      <template slot="tableRows">
        <el-table-column prop="name" label="数据流名称"></el-table-column>
        <el-table-column prop="server.name" label="上报服务器">
          <template slot-scope="props">
            <router-link v-if="props.row.server" :to="`/server/${props.row.server._id}`">
              {{ props.row.server.name }}
            </router-link>
            <span v-else>暂无</span>
          </template>
        </el-table-column>
        <el-table-column prop="action.name" label="命中动作"></el-table-column>
        <el-table-column prop="struct" label="数据信息">
          <template slot-scope="props">
            <el-popover
              placement="top-start"
              width="500"
              title="数据信息"
              trigger="hover">
              <div v-html="$jsonFormat(props.row.struct)"></div>
              <el-tag size="mini" type="primary" slot="reference">查看</el-tag>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注信息"></el-table-column>
        <el-table-column prop="user.name" label="所属用户"></el-table-column>
        <el-table-column prop="createdAt" label="上报时间">
          <template slot-scope="props">
            {{ props.row.createdAt | date }}
          </template>
        </el-table-column>
      </template>
    </leave-crud>
  </div>
</template>


<script>
  export default {
    name: 'server-error',
    data() {
      return {
        url: '/stream',
        searchOption: [
          {
            key: 'name',
            label: '数据流名称',
          },
          {
            key: 'action.name',
            label: '关联动作',
          },
        ],
      }
    },
    methods: {},
    created() {},
  }
</script>


<style lang="scss">
  .server-error {
  }
</style>
